<template>
	<view class="box-container">
		<view class="password-box" :style="'margin-top: ' + animHeight +  'px;'">
			
			<view class="Rect"></view>
			
			<view >
				<view class="text-box" style="font-size: 20px;">验证您的手机</view>
				<view class="text-box" style="font-size: 15px;">请输入发送至 {{tel}} 的 6 位验证码</view>
			</view>
			
<!-- inputCode[index].length > 0 ? 1 : 0
			 -->
			<view class="input-boxes">
				<input class="input-frames" v-for="(item,index) in 6" :key="index" :type="isApp ? 'tel' : 'number' "
				  v-model="inputCode[index]" maxlength="1" @input="WhenInput(index)" :id="index" 
				  @focus="WhenFocus" :focus="focus_index == index" />
			</view>
			
			<button class="code-btn" @click="ReloadCode" >重新获取验证码({{waitingTimer}}s)</button>
			<SpButton name="完成" :wh="86"  @btnClick="BoxFunc"></SpButton>
		</view>
	</view>
</template>

<script>
	export default {
		name:"InputBox",
		data() {
			return {
				inputCode : ['', '', '', '', '', ''],//验证码储存数组
				waitingTimer : 59,//验证码重新等待计时器
				animHeight : 500,//当前动画的位置高度
				timerFunc: null,//计时器函数
				animFunc: null,//动画函数
				focus_index: 0,//自动对焦参数
				isApp : false,//工作环境是否为app而不是小程序
			};
		},
		props : {
			tel:String,
		},
		//显示时触发方法
		mounted() {
			//开发环境判定
			if(uni.getSystemInfoSync().uniPlatform === 'app'){
				console.log("开发环境是app");
				this.isApp = true;
			}else {
				console.log("开发环境不是app");
				this.isApp = false;
			}
			//加载计时器
			this.timerFunc = setInterval( () => {
			    this.waitingTimer -= this.waitingTimer > 0 ? 1 :0;		
			}, 1000)
			//加载动画计时器
			this.animFunc = setInterval( () => {
			    this.animHeight -= this.animHeight > 350 ? 10 :0;		
			}, 5)
		},
		//隐藏时触发方法
		destroyed(){
			console.log("组件已被销毁");
			clearInterval(this.timerFunc);
			clearInterval(this.animFunc);
		},
		//方法组
		methods : {
			//处理验证码并判定是否返回页面
			BoxFunc () {
				//验证码生成阶段，用数组生成一个字符串以便于检验
				var str = "";
				str = this.inputCode.join('');
				console.log(str);
				//验证码判定阶段
				//验证码验证成功后返回页面
				this.$emit('boxClick');
			},
			//重新请求验证码
			ReloadCode() {
				if(this.waitingTimer === 0){
					this.waitingTimer = 59;
					console.log("已重新请求验证码");
				}
			},
			//当填入一位时
			WhenInput(index){
				if(this.inputCode[index] === ''){
					if(this.focus_index > 0)
					this.focus_index--;
				}
				else if(this.focus_index < 5)
					this.focus_index++;
				console.log("Input " + this.focus_index + " 内容为：" + this.inputCode[index]);
			},
			//当聚焦一位时
			WhenFocus(e){
				console.log("聚焦成功！");
				//修改当前聚焦位置
				var now = Number(e.target.id);
				this.focus_index = now;
				//光标放置在最后
				// var temp = this.inputCode[now];
				// this.$nextTick(function() {
				// 	this.inputCode[now] = temp;
				// })
			},
		}
	}
</script>

<style lang="scss">
.box-container {
	position:absolute;
	margin-top: -50px;
	//box-shadow: 2px -3px 100px -5px  #FFFFFF;
	height: 100%;
	width: 100%;
	background-color: rgba(140, 137, 137, 0.5);
	z-index: 3;
	
	.password-box {
		position: absolute;
		height: 400px;
		width: 100%;
		background-color: #F7FAFA;
		border-radius: 25px;
		
		.Rect{
			
			margin-top: 10px;
			margin-bottom: 30px;
			margin-left: 45%;
			width: 32px;
			height: 4px;
			border-radius: 4px;
			background-color: gray;
		}
		
		.text-box {
			margin-top: 10px;
			margin-left: 20px;
			font-weight: 500;
		}
		
		.input-boxes {
			margin-top: 35px;
			margin-left:19px;
			display: flex;
			align-items: center;
			
			.input-frames {
				border: 1px solid #B4C2C2;
				background-color: white;
				height: 30px;
				width: 26px;
				margin-right: 13px;
				border-radius: 4px;
				font-size: 26px;
				padding: 6px;
				font-weight: 700;
			}
		}
		
		.code-btn{
			border: 1px solid #B4C2C2;
			background-color: white;
			margin-top: 25px;
			margin-left: 22px;
			margin-bottom: 15px;
			width: 86%;
			height: 50px;
			font-size: 15px;
			padding-top: 5px;
			color: rgba(104, 110, 108, 1);
			
		}
		
	}
}
</style>